<template>
  <div>
    <el-dialog
      title="文件总预览"
      :visible.sync="dialogVisible"
      width="60%"
      :top="`3vh`"
      v-dialogDrag
      :before-close="resetForm"
    >
      <el-tabs type="border-card" class="tabStyle">
        <el-tab-pane
          :label="item.fileIndex == 0 ? '主文件' : `附件${item.fileIndex}`"
          v-for="(item, index) in fileArr"
          :key="index"
        >
          <div class="preview-box" v-if="item.type === 'video'">
            <video
              ref="videoRef"
              id="my-video"
              controls="controls"
              autoplay="autoplay"
            >
              <source :src="item.serverPath" type="video/mp4" />
              <track
                kind="subtitles"
                srclang="zh_CN"
                label="中文"
                src="/mockapi/common/sub?lang=zh_CN"
              />
              <track
                kind="subtitles"
                srclang="en_US"
                label="英文"
                src="/mockapi/common/sub?lang=en_US"
              />
            </video>
          </div>
          <div class="preview-box" v-else-if="item.type === 'image'">
            <el-image
              style="width: 100%; height: 100%"
              :src="item.serverPath"
              fit="fill"
            ></el-image>
          </div>
          <div v-else-if="item.type === 'pdf'">
            <iframe
              width="100%"
              height="700px"
              class="preview-box"
              :src="`${item.serverPath}?random=${Math.random()}`"
            ></iframe>
          </div>
          <div v-else>
            <div class="red center">
              <i class="el-icon-warning m-r"></i>（{{
                item.fileName
              }}）文件不支持预览
            </div>
            <EmptyComp
              class="m-t"
              containerH="30vh"
              :emptyConfig="emptyConfig"
              :showActions="false"
            />
            <div class="center" @click="exportFile(item)">
              <el-link type="primary"> 点击下载文件</el-link>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="resetForm()">取 消</el-button>
        <!-- <el-button size="small" type="primary" @click="submitForm()">
          确 定
        </el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { exportVideoOrPicture } from "@/api/common";
export default {
  data() {
    return {
      dialogVisible: false,
      title: "",
      type: "pdf",
      fileArr: [],
      emptyConfig: {
        title: "文件不支持预览",
        imageSvg: "empty",
        width: "20vh",
        height: "20vh",
      },
    };
  },
  methods: {
    showDialog(fileArr) {
      this.dialogVisible = true;
      this.fileArr = fileArr;
    },
    submitForm() {},
    resetForm() {
      this.fileArr = [];
      this.dialogVisible = false;
    },
    exportFile(file) {
      exportVideoOrPicture({ id: file.id });
    },
  },
};
</script>

<style lang="less" scoped>
#my-video {
  width: 100%;
}
:deep(.preview-box) {
  width: 100%;
  min-height: 55vh;
  .el-image,
  .el-image__error {
    width: 100%;
    min-height: 55vh;
  }
}
.tabStyle {
  min-height: 60vh;
}
</style>
